<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
import type { LoginResult } from '@/types/member';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { useMemberStore } from '@/stores/modules/member'
import { useSign } from '@/stores/modules/Sign'
import { getSwiperItemAPI } from '@/services/swiper'
import type { swiper } from '@/types/swiper'
import { putupdteUserSimpleAPI } from '@/services/login'
//获取会员信息
const menberStore = useMemberStore()
//获取个人信息
const person = ref<LoginResult>()
//获取用户信息
//签到模块
const onSum = () => {
  const Sign = useSign()
  if (Sign.sign == "签到成功") {
    uni.showToast({ icon: 'error', title: '今日已签到！' });
  } else {
    person.value!.fineday += 1
    Sign.setsign("签到成功")
    Sign.autoClearSignAtMidnight()
    console.log(menberStore.profile!)
    //更新静态存储
    putupdteUserSimpleAPI(person.value!.token, person.value!)
    uni.showToast({ icon: 'success', title: '签到成功！' });

  }
}
//轮播图数组
const swiperItem = ref<swiper[]>([])
//获取轮播图数据
const getSwiperData = async () => {
  const res = await getSwiperItemAPI()
  swiperItem.value = res.data
  console.log(swiperItem.value)
}
//初始化
onShow(() => {
  getSwiperData()
  person.value = menberStore.profile
})
</script>
<template>
  <view class="flex-col page" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
    <!-- 已登录的情况 -->
    <view class="flex-row justify-between">
      <view class="flex-row items-center" v-if="menberStore.profile">
        <view class="flex-col justify-start section">
          <navigator class="flex-col justify-start items-center section_2" url="/pages/logon/logon">
            <image class="image" :src="person.avatar" />
          </navigator>
        </view>
        <view class="flex-col group_15 ml-3">
          <view class="flex-col justify-start group_16">
            <view class="flex-col justify-start" v-if="true"><text class="text" v-if="true">{{
              person.nickname }}</text>
            </view>
          </view>
          <view class="flex-row items-center mt-3">
            <image class="image_3" src="https://i.postimg.cc/CxS2nQy4/image.png" />
            <view class="flex-col justify-start items-end relative group_2">
              <image class="image_4" src="https://i.postimg.cc/L47Ysc1r/image.png" />
              <text class="font text_2 pos_2">{{ person.id }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 未登录的情况 -->
      <view class="flex-row items-center" v-else>
        <view class="flex-col justify-start section">
          <navigator class="flex-col justify-start items-center section_2" url="/pages/logon/logon">
            <image class="image" src="https://i.postimg.cc/2ysvXP18/image.png" />
          </navigator>
        </view>
        <view class="flex-col group_15 ml-3">
          <view class="flex-col justify-start group_16">
            <view class="flex-col justify-start" v-if="true"><text class="text" v-if="true">未登录</text>
            </view>
          </view>
          <view class="flex-row items-center mt-3">
            <image class="image_3" src="https://i.postimg.cc/CxS2nQy4/image.png" />
            <view class="flex-col justify-start items-end relative group_2">
              <image class="image_4" src="https://i.postimg.cc/L47Ysc1r/image.png" />
              <text class="font text_2 pos_2">000000</text>
            </view>
          </view>
        </view>
      </view>

      <view class="flex-row self-start group">
        <navigator url="/pages/setter/setter">
          <image class="image_2" src="https://i.postimg.cc/bwVZS4DX/icon.png" />
        </navigator>
        <image class="ml-12 image_2" src="https://i.postimg.cc/JnGv4HwV/image.png" />
      </view>
    </view>
    <view class="flex-col group_3 mt-11">
      <view class="flex-row items-center self-center section_3">
        <text class="shrink-0 text_3">VIP</text>
        <view class="shrink-0 section_4"></view>
        <text class="font text_4">详细数据分析 改进视频</text>
        <navigator class="flex-col justify-start items-center shrink-0 text-wrapper" url="/pages/vip2/vip2">
          <text class="font_2 text_5">点击了解</text>
        </navigator>
      </view>
      <view class="flex-col self-stretch section_5">
        <view class="flex-row self-stretch group_13">
          <view class="flex-col section_6">
            <view class="flex-row justify-between">
              <view class="flex-row items-center">
                <image class="shrink-0 image_3"
                  src="https://ide.code.fun/api/image?token=65f331300a3c2f00118e3d56&name=cd4ff35b1efbbbbef0fcaf42ec720cf0.png" />
                <text class="ml-6 font_1 text_6">称号</text>
              </view>
              <view class="flex-row self-start group_4">
                <text class="text_7" @tap="onName">更换</text>
                <image class="ml-2 shrink-0 image_5"
                  src="https://ide.code.fun/api/image?token=65f331300a3c2f00118e3d56&name=c9939577cd341cc92b2e07011b0fd850.png" />
              </view>
            </view>
            <view class="mt-8 flex-row justify-center items-center group_8">
              <image class="image_6" src="https://i.postimg.cc/CKy9Lxhz/1.png" />
              <view class="ml-10 flex-col group_5">
                <text class="self-start font_4 text_12">{{ person?.grade }}</text>
                <text class="mt-8 self-end font_4">跑者</text>
              </view>
            </view>
          </view>
          <view class="flex-col section_7 ml-11">
            <view class="flex-row group_1">
              <view class="flex-col items-start flex-1 relative group_12">
                <text class="font text_8">每日签到领积分</text>
                <text class="font_2 text_10">已连续签到</text>
                <text class="font_2 text_11 pos_1">{{ person!.fineday }}</text>
              </view>
              <view class="ml-10 flex-col justify-start items-center shrink-0 text-wrapper_2" @tap="onSum">
                <text class="font_3 text_9">签</text>
              </view>
            </view>
            <!-- 签到模块 -->
            <view class="flex-row mt-7">
              <view class="flex-col items-center section_8" v-if="person!.fineday >= 10">
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">10</text>
              </view>
              <view class="flex-col items-center section_9" v-else>
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">10</text>
              </view>
              <view class="flex-col items-center section_8 ml-3 " v-if="person!.fineday >= 20">
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">20</text>
              </view>
              <view class="flex-col items-center section_9 ml-3 " v-else>
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">20</text>
              </view>
              <view class="flex-col items-center section_8 ml-3" v-if="person!.fineday >= 30">
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">30</text>
              </view>
              <view class="flex-col items-center section_9 ml-3" v-else>
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">30</text>
              </view>
              <view class="flex-col items-center section_8 ml-3" v-if="person!.fineday >= 40">
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">40</text>
              </view>
              <view class="flex-col items-center section_9 ml-3" v-else>
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">40</text>
              </view>
              <view class="flex-col items-center section_8 ml-3" v-if="person!.fineday >= 50">
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">50</text>
              </view>
              <view class="flex-col items-center section_9 ml-3" v-else>
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">50</text>
              </view>
              <view class="flex-col items-center section_8 ml-3" v-if="person!.fineday >= 60">
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">60</text>
              </view>
              <view class="flex-col items-center section_9 ml-3" v-else>
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">60</text>
              </view>
              <view class="flex-col items-center section_8 view ml-3" v-if="person!.fineday >= 70">
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">70</text>
              </view>
              <view class="flex-col items-center section_9 view ml-3" v-else>
                <image class="image_7" src="https://i.postimg.cc/N0G4JXzn/2a0b181c2325c75f02daf3cb320ad88a.png" />
                <text class="font_5 mt-5">70</text>
              </view>
            </view>
          </view>
        </view>
        <text class="mt-22 self-start text_13">赛事活动</text>
      </view>
      <swiper class="section_1" v-bind:autoplay="true" :duration="5000" v-bind:circular="true">
        <swiper-item v-for="item in swiperItem" :key="item.id">
          <view>
            <image class="image_8" :src="item.imageUrl" />
            <text>{{ item.title }}</text>
          </view>
        </swiper-item>
      </swiper>
      <view class="grid">
        <view class="flex-col items-center grid-item">
          <image class="image_11" src="https://i.postimg.cc/y6wGTNRn/image.png" />
          <text class="font_7 text_17 mt-5">历史记录</text>
        </view>
        <view class="flex-col items-center grid-item_2">
          <image class="image_11" src="https://i.postimg.cc/vHhWZqG9/image.png" />
          <text class="mt-4 font_7 text_18">我的收藏</text>
        </view>
        <view class="flex-col items-center grid-item_3">
          <image class="image_11" src="https://i.postimg.cc/bYTGxZ4f/image.png" />
          <text class="mt-4 font_7 text_19">我的赛事</text>
        </view>
        <view class="flex-col items-center grid-item_4">
          <image class="image_11" src="https://i.postimg.cc/3xDJcNfR/image.png" />
          <text class="mt-4 font_7 text_20">联系客服</text>
        </view>
        <view class="flex-col items-center relative grid-item_5">
          <image class="image_11" src="https://i.postimg.cc/jSYGRjdC/image.png" />
          <text class="mt-8 font_7">分享有礼</text>
        </view>
        <view class="flex-col items-center relative grid-item_6">
          <image class="image_11" src="https://i.postimg.cc/FzZDmhPk/image.png" />
          <text class="mt-8 font_7 text_21">个人组件</text>
        </view>
        <view class="flex-col items-center grid-item_7">
          <image class="image_11" src="https://i.postimg.cc/bvhD01Y8/download.png" />
          <text class="font_7 text_22 mt-9">历史保存</text>
        </view>
        <view class="flex-col items-center relative grid-item_8">
          <image class="image_11" src="https://i.postimg.cc/C5qS66J2/image.png" />
          <text class="mt-8 font_7 text_23">更多</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 3.75rpx;
}

.mt-2 {
  margin-top: 3.75rpx;
}

.ml-4 {
  margin-left: 7.5rpx;
}

.mt-4 {
  margin-top: 7.5rpx;
}

.ml-6 {
  margin-left: 11.25rpx;
}

.mt-6 {
  margin-top: 11.25rpx;
}

.ml-8 {
  margin-left: 15rpx;
}

.mt-8 {
  margin-top: 15rpx;
}

.ml-10 {
  margin-left: 18.75rpx;
}

.mt-10 {
  margin-top: 18.75rpx;
}

.ml-12 {
  margin-left: 22.5rpx;
}

.mt-12 {
  margin-top: 22.5rpx;
}

.ml-14 {
  margin-left: 26.25rpx;
}

.mt-14 {
  margin-top: 26.25rpx;
}

.ml-16 {
  margin-left: 30rpx;
}

.mt-16 {
  margin-top: 30rpx;
}

.ml-18 {
  margin-left: 33.75rpx;
}

.mt-18 {
  margin-top: 33.75rpx;
}

.ml-20 {
  margin-left: 37.5rpx;
}

.mt-20 {
  margin-top: 37.5rpx;
}

.ml-22 {
  margin-left: 41.25rpx;
}

.mt-22 {
  margin-top: 41.25rpx;
}

.ml-24 {
  margin-left: 45rpx;
}

.mt-24 {
  margin-top: 45rpx;
}

.ml-26 {
  margin-left: 48.75rpx;
}

.mt-26 {
  margin-top: 48.75rpx;
}

.ml-28 {
  margin-left: 52.5rpx;
}

.mt-28 {
  margin-top: 52.5rpx;
}

.ml-30 {
  margin-left: 56.25rpx;
}

.mt-30 {
  margin-top: 56.25rpx;
}

.ml-32 {
  margin-left: 60rpx;
}

.mt-32 {
  margin-top: 60rpx;
}

.ml-34 {
  margin-left: 63.75rpx;
}

.mt-34 {
  margin-top: 63.75rpx;
}

.ml-36 {
  margin-left: 67.5rpx;
}

.mt-36 {
  margin-top: 67.5rpx;
}

.ml-38 {
  margin-left: 71.25rpx;
}

.mt-38 {
  margin-top: 71.25rpx;
}

.ml-40 {
  margin-left: 75rpx;
}

.mt-40 {
  margin-top: 75rpx;
}

.ml-42 {
  margin-left: 78.75rpx;
}

.mt-42 {
  margin-top: 78.75rpx;
}

.ml-44 {
  margin-left: 82.5rpx;
}

.mt-44 {
  margin-top: 82.5rpx;
}

.ml-46 {
  margin-left: 86.25rpx;
}

.mt-46 {
  margin-top: 86.25rpx;
}

.ml-48 {
  margin-left: 90rpx;
}

.mt-48 {
  margin-top: 90rpx;
}

.ml-50 {
  margin-left: 93.75rpx;
}

.mt-50 {
  margin-top: 93.75rpx;
}

.ml-52 {
  margin-left: 97.5rpx;
}

.mt-52 {
  margin-top: 97.5rpx;
}

.ml-54 {
  margin-left: 101.25rpx;
}

.mt-54 {
  margin-top: 101.25rpx;
}

.ml-56 {
  margin-left: 105rpx;
}

.mt-56 {
  margin-top: 105rpx;
}

.ml-58 {
  margin-left: 108.75rpx;
}

.mt-58 {
  margin-top: 108.75rpx;
}

.ml-60 {
  margin-left: 112.5rpx;
}

.mt-60 {
  margin-top: 112.5rpx;
}

.ml-62 {
  margin-left: 116.25rpx;
}

.mt-62 {
  margin-top: 116.25rpx;
}

.ml-64 {
  margin-left: 120rpx;
}

.mt-64 {
  margin-top: 120rpx;
}

.ml-66 {
  margin-left: 123.75rpx;
}

.mt-66 {
  margin-top: 123.75rpx;
}

.ml-68 {
  margin-left: 127.5rpx;
}

.mt-68 {
  margin-top: 127.5rpx;
}

.ml-70 {
  margin-left: 131.25rpx;
}

.mt-70 {
  margin-top: 131.25rpx;
}

.ml-72 {
  margin-left: 135rpx;
}

.mt-72 {
  margin-top: 135rpx;
}

.ml-74 {
  margin-left: 138.75rpx;
}

.mt-74 {
  margin-top: 138.75rpx;
}

.ml-76 {
  margin-left: 142.5rpx;
}

.mt-76 {
  margin-top: 142.5rpx;
}

.ml-78 {
  margin-left: 146.25rpx;
}

.mt-78 {
  margin-top: 146.25rpx;
}

.ml-80 {
  margin-left: 150rpx;
}

.mt-80 {
  margin-top: 150rpx;
}

.ml-82 {
  margin-left: 153.75rpx;
}

.mt-82 {
  margin-top: 153.75rpx;
}

.ml-84 {
  margin-left: 157.5rpx;
}

.mt-84 {
  margin-top: 157.5rpx;
}

.ml-86 {
  margin-left: 161.25rpx;
}

.mt-86 {
  margin-top: 161.25rpx;
}

.ml-88 {
  margin-left: 165rpx;
}

.mt-88 {
  margin-top: 165rpx;
}

.ml-90 {
  margin-left: 168.75rpx;
}

.mt-90 {
  margin-top: 168.75rpx;
}

.ml-92 {
  margin-left: 172.5rpx;
}

.mt-92 {
  margin-top: 172.5rpx;
}

.ml-94 {
  margin-left: 176.25rpx;
}

.mt-94 {
  margin-top: 176.25rpx;
}

.ml-96 {
  margin-left: 180rpx;
}

.mt-96 {
  margin-top: 180rpx;
}

.ml-98 {
  margin-left: 183.75rpx;
}

.mt-98 {
  margin-top: 183.75rpx;
}

.ml-100 {
  margin-left: 187.5rpx;
}

.mt-100 {
  margin-top: 187.5rpx;
}

.mt-3 {
  margin-top: 5.63rpx;
}

.mt-11 {
  margin-top: 20.63rpx;
}

.ml-11 {
  margin-left: 20.63rpx;
}

.mt-7 {
  margin-top: 13.13rpx;
}

.ml-3 {
  margin-left: 5.63rpx;
}

.mt-5 {
  margin-top: 9.38rpx;
}

.mt-9 {
  margin-top: 16.88rpx;
}

.page {
  padding: 63.75rpx 42.45rpx 155.63rpx 42.45rpx;
  background-color: #ecf0f1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    background-color: #cccccc;
    border-radius: 50%;
    background-image: url('https://ide.code.fun/api/image?token=65f331300a3c2f00118e3d56&name=a599fd309147a88671f30bd6d21bbe94.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 135.68rpx;

    .section_2 {
      width: 135rpx;

      .image {
        width: 135rpx;
        height: 135rpx;
      }
    }
  }

  .group_15 {
    width: 228.32rpx;

    .group_16 {
      margin-left: 5.19rpx;

      .text {
        color: #000000;
        font-size: 30rpx;
        font-family: SourceHanSansCN;
        line-height: 32.81rpx;
      }
    }

    .group_2 {
      width: 173.89rpx;

      .image_4 {
        width: 28.13rpx;
        height: 28.13rpx;
      }

      .text_2 {
        color: #000000;
        font-size: 24.38rpx;
        line-height: 18.51rpx;
      }

      .pos_2 {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .group {
    margin-right: 13.8rpx;
    margin-top: 58.13rpx;

    .image_2 {
      width: 45rpx;
      height: 45rpx;
    }
  }

  .group_3 {
    padding: 0 2.55rpx;
    height: 1183.13rpx;

    .section_3 {
      padding: 22.5rpx 15rpx 15rpx 22.54rpx;
      background-color: #3498dbb3;
      border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;

      .text_3 {
        color: #ffffff;
        font-size: 45rpx;
        font-family: SourceHanSansCN;
        line-height: 32.98rpx;
      }

      .section_4 {
        margin-left: 13.09rpx;
        filter: blur(0.94rpx);
        background-color: #ffffff;
        width: 1.88rpx;
        height: 28.13rpx;
      }

      .text_4 {
        margin-left: 19.8rpx;
        color: #ffffff;
        line-height: 31.88rpx;
        width: 255rpx;
      }

      .text-wrapper {
        margin-left: 38.33rpx;
        padding: 10.33rpx 0 8.12rpx;
        background-color: #ffffff;
        border-radius: 46.88rpx;
        width: 112.5rpx;
        height: 37.5rpx;

        .text_5 {
          color: #3498db;
          line-height: 19.05rpx;
        }
      }
    }

    .section_5 {
      margin-right: 16.88rpx;
      padding: 39.38rpx 9.38rpx 381.26rpx 10.33rpx;
      background-image: linear-gradient(180deg, #e1e7e8 0%, #e1e7e800 23.9%);
      border-radius: 18.75rpx;

      .group_13 {
        padding-left: 2.79rpx;

        .section_6 {
          padding: 15rpx 7.5rpx 16.88rpx 11.25rpx;
          flex: 1 1 300rpx;
          background-color: #ffffff;
          border-radius: 18.75rpx;
          height: 206.25rpx;

          .text_6 {
            color: #000000;
            line-height: 23.87rpx;
          }

          .group_4 {
            margin-top: 9.38rpx;

            .text_7 {
              color: #000000;
              font-size: 16.88rpx;
              font-family: SourceHanSansCN;
              line-height: 15.58rpx;
            }

            .image_5 {
              width: 20.63rpx;
              height: 16.88rpx;
            }
          }

          .group_8 {
            padding: 0 3.75rpx;

            .image_6 {
              width: 112.5rpx;
              height: 112.5rpx;
            }

            .group_5 {
              width: 139.76rpx;

              .font_4 {
                font-size: 45rpx;
                font-family: AlimamaShuHeiTi;
                line-height: 40.69rpx;
                color: #000000;
              }

              .text_12 {
                line-height: 41.18rpx;
              }
            }
          }
        }

        .section_7 {
          padding: 23.25rpx 13.13rpx 26.25rpx;
          flex: 1 1 300rpx;
          background-color: #ffffff;
          border-radius: 18.75rpx;
          height: 206.25rpx;

          .group_1 {
            padding-left: 4.78rpx;
            padding-right: 3.75rpx;

            .group_12 {
              padding-bottom: 3.02rpx;

              .text_8 {
                color: #808080;
                line-height: 24.41rpx;
              }

              .text_10 {
                margin-left: 2.76rpx;
                margin-top: 16.95rpx;
                color: #000000;
                line-height: 24.38rpx;
              }

              .text_11 {
                color: #3498db;
                font-size: 15rpx;
                line-height: 30rpx;
                width: 40rpx;
                height: 24rpx;
              }

              .pos_1 {
                position: absolute;
                right: 0rpx;
                bottom: 0rpx;
              }
            }

            .text-wrapper_2 {
              margin-bottom: 5.76rpx;
              padding: 16.03rpx 0 15.88rpx;
              background-color: #89c1e8;
              border-radius: 50%;
              width: 60rpx;
              height: 61.88rpx;

              .font_3 {
                font-size: 33.75rpx;
                font-family: AlimamaShuHeiTi;
              }

              .text_9 {
                color: #ffffff;
                line-height: 29.96rpx;
              }
            }
          }

          .section_8 {
            padding: 13.13rpx 0 13.99rpx;
            flex: 1 1 33.75rpx;
            background-color: #6bb2e2cc;
            border-radius: 37.5rpx;
            height: 75rpx;
          }

          .section_9 {
            flex: 1 1 33.75rpx;
            padding: 13.13rpx 0 13.99rpx;
            background-color: #e5e5e5cc;
            border-radius: 37.5rpx;
            height: 75rpx;
          }

          .image_7 {
            width: 26.25rpx;
            height: 26.25rpx;
          }

          .font_5 {
            font-size: 16.88rpx;
            font-family: AlibabaPuHuiTi;
            line-height: 12.06rpx;
            color: #ffffff;
          }

          .view {
            margin-right: 3.77rpx;
          }
        }

        .font_1 {
          font-size: 26.25rpx;
          font-family: AlimamaShuHeiTi;
        }
      }

      .text_13 {
        color: #000000;
        font-size: 30rpx;
        font-family: AlibabaPuHuiTi;
        line-height: 27.75rpx;
      }
    }

    .font_2 {
      font-size: 20.63rpx;
      font-family: SourceHanSansCN;
    }

    .section_1 {
      position: relative;
      align-self: stretch;
      margin-right: 20.63rpx;
      margin-top: -371.25rpx;

      .image_8 {
        border-radius: 18.75rpx;
        width: 637.5rpx;
        height: 300.88rpx;
      }
    }

    .grid {
      margin-right: 20.63rpx;
      margin-top: 37.5rpx;
      padding: 13.65rpx 0 28.01rpx;
      background-color: #ffffff;
      border-radius: 18.75rpx;
      height: 348.75rpx;
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      grid-template-columns: repeat(4, minmax(0, 1fr));
      row-gap: 0;
      column-gap: 0;

      .grid-item {
        padding: 29.36rpx 0 32.74rpx;

        .text_17 {
          line-height: 18.69rpx;
        }
      }

      .grid-item_2 {
        padding: 29.36rpx 0 32.55rpx;

        .text_18 {
          line-height: 19.39rpx;
        }
      }

      .image_11 {
        width: 63.99rpx;
        height: 63.99rpx;
      }

      .font_7 {
        font-size: 20.63rpx;
        font-family: AlibabaPuHuiTi;
        line-height: 18.96rpx;
        color: #000000;
      }

      .grid-item_3 {
        padding: 29.34rpx 0 32.7rpx;
        width: 159.38rpx;

        .text_19 {
          line-height: 19.24rpx;
        }
      }

      .grid-item_4 {
        padding: 29.34rpx 0 32.76rpx;
        width: 159.38rpx;

        .text_20 {
          line-height: 19.22rpx;
        }
      }

      .grid-item_5 {
        padding: 21.13rpx 0 34.33rpx;
      }

      .grid-item_6 {
        padding: 21.11rpx 0 34.5rpx;

        .text_21 {
          line-height: 18.73rpx;
        }
      }

      .grid-item_7 {
        padding: 21.13rpx 0 32.55rpx;
        width: 159.38rpx;

        .text_22 {
          line-height: 18.81rpx;
        }
      }

      .grid-item_8 {
        padding: 21.13rpx 0 34.29rpx;

        .text_23 {
          line-height: 19.13rpx;
        }
      }
    }
  }

  .font {
    font-size: 26.25rpx;
    font-family: SourceHanSansCN;
  }

  .image_3 {
    width: 46.88rpx;
    height: 46.88rpx;
  }
}
</style>
